<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
<meta charset="UTF-8">
<title>登录注册表单</title>
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--图标库-->
<link rel='stylesheet' th:href="@{https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css}" >

<!--响应式框架-->
<link rel='stylesheet' th:href='@{login/css/bootstrap.min.css}'>

<!--主要样式-->
<link rel="stylesheet" th:href="@{login/css/style.css}">


</head>

<body>
  
<div class="container">

	<div class="card-wrap">
	
		<div class="card border-0 shadow card--welcome is-show" id="welcome">
			<div class="card-body">
				<h2 class="card-title">半亩方塘</h2>

				<h2 class="card-title" style="color: red" th:text="${username}" th:if="${not #strings.isEmpty(username)}"></h2>
				<h2 class="card-title" style="color: red" th:text="${error}" th:if="${not #strings.isEmpty(error)}"></h2>
				<p>登录页面</p>
				<p th="${message}"></p>
				<div class="btn-wrap"><a class="btn btn-lg btn-register js-btn" data-target="register">注册</a><a class="btn btn-lg btn-login js-btn" data-target="login">登录</a></div>
			</div>
		</div>
		
		<div class="card border-0 shadow card--register" id="register">
			<div class="card-body">
				<h2 class="card-title">注册</h2>
				<p class="card-text">第三方注册</p>
				<p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
				<p>或者使用您的电子邮箱进行注册</p>
				<form th:action="@{/signIn.do}" method="post">
					<div class="form-group">
						<input class="form-control" name="userCode" type="text" placeholder="登录的账号" required="required"/>
					</div>
					<div class="form-group">
						<input class="form-control" name="userName" type="text" placeholder="显示的名称" required="required"/>
					</div>
					<div class="form-group">
						<input class="form-control" name="usePassword" type="password" placeholder="密码" required="required"/>
					</div>
					<div class="form-group">
						<select  class="form-control" name="gender" id="gender">
							<option name="gender" value="1" selected="selected">性别--男</option>
							<option name="gender" value="2">女</option>
						</select>
					</div>
					<div class="form-group">
						<input class="form-control" name="birthday" type="date" placeholder="" required=""/>
					</div>
					<div class="form-group">
						<input class="form-control" name="phone" type="text" placeholder="手机号" />
					</div>
					<div class="form-group">
						<input class="form-control" name="address" type="text" placeholder="住址" />
					</div>
					<div class="form-group">
						<input class="form-control" id="email" name="email" type="email" placeholder="邮箱" required="required"/>
						<input class="btn-primary" type="button" onclick="sendPhrase()" value="点击发送验证码">
					</div>
					<script>
						function sendPhrase() {
							$.ajax({
								url:"sendPhrase" ,
								data:{'email':$("#email").val()},
								type:"post",
								success:function (data) {
									console.log(data)
									alert(data);
								},
								error:function (data) {
									console.log(data)
									alert("error");
								}
							});//这个分号一定能要记得加上..
						}
					</script>

<!--					验证码-->
					<div class="form-group">
						<input class="form-control" name="phrase" type="text" placeholder="验证码" required="required"/>
					</div>
					<div class="form-group">
						<select  class="form-control" name="userRole" id="userRole">
							<option name="userRole"value="1" selected="selected">系统管理员</option>
							<option name="userRole"value="2">经理</option>
							<option name="userRole"value="3">普通用户</option>
						</select>
					</div>
					<button class="btn btn-lg">注册</button>
				</form>
			</div>
			<button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
		</div>
		
		<div class="card border-0 shadow card--login" id="login">
			<div class="card-body">
				<h2 class="card-title">欢迎登录！</h2>
				<p>第三方登录</p>
				<p class="badge-wrap"><a class="badge"><i class="fab fa-facebook-f"></i></a><a class="badge"><i class="fab fa-google"></i></a><a class="badge"><i class="fab fa-twitter"></i></a><a class="badge"><i class="fab fa-github"></i></a></p>
				<p>或者使用账号登录</p>
				<form th:action="@{/login.do}" method="post">
					<div class="form-group">
						<input class="form-control" type="text" name="userCode" placeholder="账号" required="required"/>
					</div>
					<div class="form-group">
						<input class="form-control" type="password" name="userPassword" placeholder="密码" required="required"/>
					</div>
					<p><a href="#">忘记密码?</a></p>
					<button class="btn btn-lg" type="submit" >登录</button>
				</form>
			</div>
			<button class="btn btn-back js-btn" data-target="welcome"><i class="fas fa-angle-left"></i></button>
		</div>
		
	</div>
	
</div>
  
<script th:src="@{login/js/index.js}"></script>
<script th:src="@{js/jquery-3.5.1.min.js}"></script>
</body>
</html>